<template>
  <h1>MyPage</h1>
  <!--index.js中配置的，route为全局-->
  <h3>{{ $route.params.id }}</h3>
  <h3>{{ pid }}</h3>
  <h3>id: {{ id }}</h3>
</template>

<script>
import {onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router'
import {ref, watch} from 'vue'

export default {
  name: "MyPage",
  //setup只执行一次
  setup() {
    //不能用$route，因为没有this
    const route = useRoute()
    const router = useRouter()

    // let id = route.params.id
    let id = ref()
    //因为setup只执行一次，所以要想响应的话，得放一个监听器，感觉这设计，有点不是太好也
    watch(() => route.params, (newid) => {
      id.value = newid.id
      //异步请求查找用户信息
    })

    setTimeout(() => {
      router.push({path: '/routerapi/article', query: {name: '9999', 'keyword': '8888'}})
    }, 5000)

    onBeforeRouteLeave((to, from) => {
      let answer = window.confirm(`are you sure want to from ${from.fullPath} go to ${to.fullPath}`)
      if (!answer) return false
    })
    onBeforeRouteUpdate()
    return {id}
  },
  computed: {
    pid() {
      return this.$route.params.id;
    }
  }
}
</script>

<style scoped>

</style>
